<template>
  <el-dialog
    v-model="show"
    :title="`流量分布详情 (总架次${total})`"
    width="800px"
    draggable
  >
    <el-tabs
      v-if="arrangedData && arrangedData.length > 0"
      v-model="activeTabName"
    >
      <el-tab-pane label="起降架次" name="1">
        <el-table :data="arrangedData" height="600px">
          <el-table-column
            v-for="item in columns"
            :label="item.title"
            :prop="item.key"
            :min-width="item.width"
            align="center"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="过点数据" name="2">
        <el-table
          :data="arrangedData"
          height="600px"
          style="font-family: Consolas"
        >
          <el-table-column
            v-for="item in columns2"
            :label="item.title"
            :prop="item.key"
            :min-width="item.width"
            align="center"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="原始数据" name="3">
        <pre style="height: 600px; overflow: auto; padding: 12px">{{
          arrangedData
        }}</pre>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import { cumulate, arrange, policyCompute } from "../utils";

const activeTabName = ref("1");
const show = ref(false);
const source = ref(null);
const open = async (res) => {
  source.value = null;
  activeTabName.value = "1";
  await nextTick();
  source.value = res;
  show.value = true;
};

const arrangedData = computed(() => {
  if (!source.value) return null;
  let rawData = source.value.rawData;
  let tags = source.value.tags;
  let begTime = source.value.begTime;
  if (!rawData || rawData.length == 0) return [];
  let cumulatedRawData = cumulate(rawData);
  let arrangedData = arrange(cumulatedRawData, tags, begTime);
  return arrangedData;
});

const total = computed(() => {
  if (!arrangedData.value) return 0;
  let total = 0;
  arrangedData.value.forEach((data) => {
    total += data.total;
  });
  return total;
});

const columns = ref([
  {
    title: "时刻",
    key: "moment",
    width: "160",
  },
  {
    title: "总架次",
    key: "total",
    width: "80",
  },
  // {
  //   title: "双流合计",
  //   key: "airport.ZUUU.total",
  //   width: "80",
  // },
  {
    title: "双流起飞",
    key: "airport.ZUUU.type.DEP.total",
    width: "80",
  },
  {
    title: "双流落地",
    key: "airport.ZUUU.type.ARR.total",
    width: "80",
  },
  // {
  //   title: "天府合计",
  //   key: "airport.ZUTF.total",
  //   width: "80",
  // },
  {
    title: "天府起飞",
    key: "airport.ZUTF.type.DEP.total",
    width: "80",
  },
  {
    title: "天府落地",
    key: "airport.ZUTF.type.ARR.total",
    width: "80",
  },
  // {
  //   title: "绵阳合计",
  //   key: "airport.ZUMY.total",
  //   width: "80",
  // },
  {
    title: "绵阳起飞",
    key: "airport.ZUMY.type.DEP.total",
    width: "80",
  },
  {
    title: "绵阳落地",
    key: "airport.ZUMY.type.ARR.total",
    width: "80",
  },
]);

const columns2 = computed(() => {
  let cols = new Array({
    title: "MOMTNT",
    key: "moment",
    width: "120",
  });
  let line = arrangedData.value[0];

  Object.keys(line.airport).forEach((a) => {
    Object.keys(line.airport[a].type).forEach((t) => {
      Object.keys(line.airport[a].type[t].point).forEach((p) => {
        cols.push({
          title: `${a} ${p} ${t}`,
          key: `airport.${a}.type.${t}.point.${p}`,
          width: "70",
        });
      });
    });
  });
  return cols;
});
defineExpose({ open });
</script>
